<template>
<div class="clock" :class="{'evening':color}">
	<div id="date">
		<div class="digit" v-for="i in MMDD">
			<div v-for="isOn in i" class="segment" :class="{'on':isOn}"></div>
		</div>
	</div>
	<div></div>
	<div class="digit" v-for="i in time">
		<div v-for="isOn in i.part" class="segment" :class="{'on':isOn}"></div>
	</div>
	<div class="separator one top"></div>
	<div class="separator two top" :style="{'opacity':opa}"></div>
	<div class="separator one bottom"></div>
	<div class="separator two bottom" :style="{'opacity':opa}"></div>
</div>
</template>

<script>
export default{
	data(){
		return{
			digit:[
				[1,1,1,1,1,1,0],//0
				[0,1,1,0,0,0,0],//1
				[1,1,0,1,1,0,1],//2
				[1,1,1,1,0,0,1],//3
				[0,1,1,0,0,1,1],//4
				[1,0,1,1,0,1,1],//5
				[1,0,1,1,1,1,1],//6
				[1,1,1,0,0,0,0],//7
				[1,1,1,1,1,1,1],//8
				[1,1,1,0,0,1,1]//9
			],
			time:[
				{num: -1, part: [0,0,0,0,0,0,0]},
				{num: -1, part: [0,0,0,0,0,0,0]},
				{num: -1, part: [0,0,0,0,0,0,0]},
				{num: -1, part: [0,0,0,0,0,0,0]},
				{num: -1, part: [0,0,0,0,0,0,0]},
				{num: -1, part: [0,0,0,0,0,0,0]},
			],
			MMDD:[
				[0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0]
			],
			opa:1
		}
	},
	props:["color"],
	created() {
		setTimeout(()=>{
			this.setDate()
		},1500)
		setInterval(()=>{
			let date = new Date();
			let h = date.getHours();
			let m = date.getMinutes();
			let s = date.getSeconds();  
			this.setNumber([
						Math.floor(h/10),
						h%10,
						Math.floor(m/10),
						m%10,
						Math.floor(s/10),
						s%10
						]);
		}, 1000);
	},
	methods:{
		setNumber(time) {
			for(let i=0;i<6;i++)//用do while就报错
				if(time[i] != this.time[i].num)
					{
						this.time[i].part = [0,0,0,0,0,0,0]
						this.opa = 0.15
						// var that = this.time
						setTimeout(()=>{
							this.opa = 1
							this.time[i].num = time[i]
							this.time[i].part = this.digit[time[i]]
						},200)
					}
		},
		setDate(day){
			let date = new Date();
			let M = date.getMonth()+1;
			let D = date.getDate()
			let data = [Math.floor(M/10),M%10,Math.floor(D/10),D%10]
			for(let i=0;i<4;i++)
				this.MMDD[i] = this.digit[data[i]]
		}
	}
}
/*
// let i = 0
// do{
// 	setTimeout(()=>{
// 		console.log(i)
// 	},2000)
// }while(++i<6)

// for(var i=0;i<6;i++)
// setTimeout(()=>{
// 	console.log(i)
// },2000)

// for(let i=0;i<6;i++)
// setTimeout(()=>{
// 	console.log(i)
// },2000)	
*/
</script>

<style lang="scss">
.evening{
	.separator,.segment{
		background:#ec0000 !important;
	}
	.on,.separator{
		box-shadow:0 0 20px rgba(255,0,0,0.8) !important;
	}
}
.clock{
	#date{
		position: absolute;
		left: -600px;
		top: 200px;
		zoom: 0.5;
	}
	position:relative;
	.digit:nth-child(2n){
		margin-right: 60px;
	}
	.separator { //·
		width:15px;
		height:15px;
		background:#000000;
		border-radius:50%;
		display:inline-block;
		position:absolute;
		box-shadow:0 0 20px rgba(0,0,0,0.7);
	}
	.one{
		left: 280px;
	}
	.top{
		top:60px;
	}
	.two{
		left: 600px;
	}
	.bottom{
		top:120px;
	}
	.digit,.date {
		width:120px;
		height:200px;
		margin:0 5px;
		position:relative;
		display:inline-block;
		.segment {
			// background:#c00;
			background:#000000;
			border-radius:5px;
			position:absolute;
			opacity:0.15;
			transition:opacity 0.2s;
		}
		.on {
			opacity:1;
			box-shadow:0 0 20px rgba(0, 0, 0, 0.7);
		}
		
		:nth-child(1) {
			top:10px;
			left:20px;
			right:20px;
			height:10px;
		}
		:nth-child(2) {
			top:20px;
			right:10px;
			width:10px;
			height:75px;
			// height:calc(50% - 25px);
		}
		:nth-child(3) {
			bottom:20px;
			right:10px;
			width:10px;
			height:75px;
			// height:calc(50% - 25px);
		}
		:nth-child(4) {
			bottom:10px;
			right:20px;
			height:10px;
			left:20px;
		}
		:nth-child(5) {
			bottom:20px;
			left:10px;
			width:10px;
			height:75px;
			// height:calc(50% - 25px);
		}
		:nth-child(6) {
			top:20px;
			left:10px;
			width:10px;
			height:75px;
			// height:calc(50% - 25px);
		}
		:nth-child(7) {
			bottom:95px;
			// bottom:calc(50% - 5px);
			right:20px;
			left:20px;
			height:10px;
		}
	}
	
}
@keyframes flashing{
	0%{ opacity: 1; }
	90%{ opacity: 1; }
	100%{ opacity: 0; }
}
</style>
